import { useStore } from "vuex";

//    用来判断鼠标松开时,是否在floor底部功能区
//    目前有 音量模块和播放列表模块使用

//  鼠标松开事件
export default function () {
    const store = useStore();
    function bodyUp() {

        const body = document.body;
        // // 解绑事件
        body.onmouseup = null;
        if (store.state.SongVolume.volumeShow || store.state.SongList.flag) {
            //  当音量区域显示时执行
            //  判断mouseup是否在底部区域松开
            //   是在底部区域松开 则不需要隐藏音量区域
            //  不是在底部区域松开,则隐藏音量区域
            body.onmouseup = function (e) {

                let element = e.target;
                let flag = true;

                while (flag) {
                    switch (element) {
                        case store.state.SongVolume.floorElement:
                            //  在底部区域松开,直接结束循环,不需要隐藏音量区域
                            flag = false;
                            break;
                        case body:
                            //  在body区域松开
                            //  隐藏音量区域
                            store.commit("SongVolume/changeVolumeShow", false)
                            //  隐藏播放列表
                            store.commit("SongList/changFlag", false)
                            // 结束循环
                            flag = false;
                            // 解绑事件
                            body.onmouseup = null;
                            break;

                        default:
                            element = element.parentNode;
                            break;
                    }
                }
            }


        }
    }

    return bodyUp
}